
<script >
export default {
  data(){
    return{
      dialogTableVisible: false,
      ids:[],
      current:1,
      pageSize:899999,
      total:0,
      form:{
      },
      tableData:[],
      tableData1:[],
      imageUrl:'',
      selectedLabels: [],
      servicePackage:{

      },
    }
  },
  methods:{
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.findAllxm();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val;
      this.findAllxm()
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.servicePackage.img=res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleSelectionChange(val) {
      this.ids = val;
    },
    qx(){
      this.$router.push('/fwb')
    },
    handleDelete(id){
        // this.axios.get(`http://localhost:8302/bao/del?id=${id}&token=`+this.servicePackage.xid).then(res=>{
        //   this.getfw();
      var t1=[]
      this.tableData1.forEach(item=>{
        if(item.id!=id){
          t1.push(item)
        }
      })
      this.tableData1=t1;
      this.$message({
        type: 'success',
        message: '删除成功!'
      });
        // })
    },
    getAll(){
      this.axios.post(`http://localhost:8302/xiangmu/getAll?current=${this.current}&pageSize=${this.pageSize}`,this.form).then(res=>{
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
      })
    },
    // getfw(){
    //   this.axios.get(`http://localhost:8302/bao/getfw?token=`+this.servicePackage.xid).then(res=>{
    //     this.tableData1= res.data.data;
    //   })
    // },
    submitForm(){
      var ids=[]
      for(var i=0;i<this.ids.length;i++){
        ids.push(this.ids[i].id);
      }
      this.servicePackage.biaoqian = this.selectedLabels.join(',');
      this.axios.post(`http://localhost:8302/bao/save?ids=${ids}`,this.servicePackage).then(res=>{
        this.$router.push('/fwb')
        this.$message({
          type: 'success',
          message: '保存成功!'
        });
      })
    },
    bc(){
      var ids=[]
      for(var i=0;i<this.ids.length;i++){
        ids.push(this.ids[i].id);
      }
      if (ids!=null&&ids.length>0){
        this.dialogTableVisible=false;
        this.axios.get(`http://localhost:8302/bao/xm?ids=${ids}`).then(res=>{
          // this.servicePackage.xid=res.data.data;
          // this.getfw()
          this.tableData1=res.data.data;
          ids=[];
        })
      }else {
        this.$message({
          type: 'warning',
          message: '请选择至少一个服务包!'
        });
      }
    },
  },
  created(){
    this.getAll();
    // this.getfw();
  }
}
</script>

<template>
  <div class="c">
    <el-container>
      <el-header align="left" style="margin-top: 60px"> |  新增服务包</el-header>
      <el-main align="left">
        <el-card>
          <el-form :model="servicePackage">
            <div style="margin-bottom: 30px">服务包信息</div>
             <el-col class="a" :span="8">
               <el-form-item label="包名">
                 <el-input v-model="servicePackage.name" style="width: 200px"></el-input>
               </el-form-item>
               <el-form-item label="订阅价格">
                 <el-input v-model="servicePackage.price" style="width: 200px"></el-input>
               </el-form-item>
               <el-form-item label="续签情况">
                 <el-radio-group v-model="servicePackage.xqqk" style="width: 200px">
                   <el-radio label="可续签">可续签</el-radio>
                   <el-radio label="不可续签">不可续签</el-radio>
                 </el-radio-group>
               </el-form-item>
             </el-col>
             <el-col class="a" :span="8">
               <el-form-item label="服务包类型">
                 <el-select v-model="servicePackage.lx" placeholder="请选择服务包类型">
                   <el-option label="初级包" value="0"></el-option>
                   <el-option label="中级包" value="1"></el-option>
                   <el-option label="高级包" value="2"></el-option>
                 </el-select>
               </el-form-item>
               <el-form-item label="服务包标签">
                 <el-select v-model="selectedLabels" multiple placeholder="请选择服务包标签">
<!--                   <el-option label="全选" value="全选"></el-option>-->
                   <el-option label="慢病护理" value="慢病护理"></el-option>
                   <el-option label="高血压" value="高血压"></el-option>
                   <el-option label="高血糖" value="高血糖"></el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col class="a" :span="8">
               <!--              <el-form-item label="服务包标志">-->
               <!--                <el-input v-model="servicePackage.packageLogo" style="width: 200px"></el-input>-->
               <!--              </el-form-item>-->
               <el-form-item label="服务对象">
                 <el-input v-model="servicePackage.fwdx" style="width: 200px"></el-input>
               </el-form-item>
               <el-form-item label="签约周期">
                 <el-select v-model="servicePackage.qytime" placeholder="请选择签约周期">
                   <el-option label="1 年" value="1 年"></el-option>
                   <el-option label="2 年" value="2 年"></el-option>
                   <el-option label="3 年" value="3 年"></el-option>
                 </el-select>
               </el-form-item>
             </el-col>
           <el-col class="a">
             <el-form-item label="服务包图片">
               <el-upload
                   class="avatar-uploader"
                   action="http://localhost:8302/bao/tp"
                   name="file"
                   :show-file-list="false"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUpload">
                 <img width="50px" v-if="imageUrl" :src="imageUrl" class="avatar">
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </el-form-item>
             <el-form-item label="服务介绍">
               <el-input type="textarea" v-model="servicePackage.fwjs" style="width: 200px;"></el-input>
             </el-form-item>
           </el-col>


            <el-col class="a" align="center">
              <div style="margin-bottom: 30px" align="left">服务项目
                <el-button type="primary"  style="float: right;margin-right: 200px;width: 100px;" @click="dialogTableVisible = true">添加</el-button>
              </div>
              <el-table
                  :data="tableData1"
                  stripe
                  style="width: 80%;">
                <el-table-column
                    prop="id"
                    label="项目编号">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="项目名称">
                </el-table-column>
                <el-table-column
                    label="次数">
                  <template slot-scope="scope">
                    {{ scope.row.num }} 次
                  </template>
                </el-table-column>
                <el-table-column
                    prop="xmlx"
                    label="项目类型">
                </el-table-column>
                <el-table-column
                    prop="xmjs"
                    label="项目介绍">
                </el-table-column>
<!--                <el-table-column-->
<!--                    label="操作">-->
<!--                  <template slot-scope="scope">-->
<!--                    <el-button-->
<!--                        style="width: 80px;"-->
<!--                        size="mini"-->
<!--                        type="danger"-->
<!--                        @click="handleDelete(scope.row.id)">删除-->
<!--                    </el-button>-->
<!--                  </template>-->
<!--                </el-table-column>-->
              </el-table>
<!--              <el-form-item label="病情" align="left" style="margin-top: 30px">-->
<!--                <el-input v-model="servicePackage.illness" style="width: 200px;"></el-input>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="健康指标" align="left">-->
<!--                <el-input v-model="servicePackage.healthIndicators" style="width: 200px;"></el-input>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="备注" align="left">-->
<!--                <el-input v-model="servicePackage.notes" style="width: 200px;"></el-input>-->
<!--              </el-form-item>-->

            </el-col>
            <el-col class="a" align="right">

              <el-button type="danger" @click="qx" style="width: 100px;">取消</el-button>
              <el-button type="primary" @click="submitForm" style="margin-right: 200px;width: 100px;">提交</el-button>
            </el-col>
          </el-form>
<!--          <el-form-item>-->
<!--          </el-form-item>-->
        </el-card>
      </el-main>
      <el-dialog title="选择服务项目" :visible.sync="dialogTableVisible" align="left">
        <el-table
            height="400px"
            :data="tableData"
            border
            @selection-change="handleSelectionChange"
            style="width: 100%">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="id"
              label="项目编号">
          </el-table-column>
          <el-table-column
              prop="name"
              label="项目名称">
          </el-table-column>
          <el-table-column
              label="次数">
            <template slot-scope="scope">
              {{ scope.row.num }} 次
            </template>
          </el-table-column>
          <el-table-column
              prop="xmlx"
              label="项目类型">
          </el-table-column>
          <el-table-column
              prop="xmjs"
              label="项目介绍">
          </el-table-column>
        </el-table>
<!--        <el-pagination-->
<!--            align="right"-->
<!--            background-->
<!--            layout="prev, pager, next"-->
<!--            :total="total"-->
<!--            @size-change="handleSizeChange"-->
<!--            @current-change="handleCurrentChange"-->
<!--            :current-page="current"-->
<!--            :page-size="pageSize">-->
<!--        </el-pagination>-->
        <el-button type="primary" @click="bc">保存</el-button>
<!--        <el-button @click="this.ids=[]">取消</el-button>-->
      </el-dialog>
    </el-container>

  </div>
</template>

<style >
.c{
  background-color: #F2F7FB;
  border: 1px solid #d3dce6;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
  width: 90%;
  height: 90%;
  overflow: auto;
}
.a{
  background-color: #FFFFFF;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
